<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
		<meta name="format-detection" content="telephone=no">
		<title>12389投诉</title>
		<link rel="stylesheet" href="../css/frozen.css">
		<link rel="stylesheet" type="text/css" href="../css/main.css" />
		<style type="text/css">
			.ui-form-item label:not(.ui-switch):not(.ui-checkbox):not(.ui-radio){width: 105px; text-align: right;}
			.ui-form-item input, .ui-form-item textarea{padding-left: 105px;}
			.ui-select select{width: 90%; margin-left: 5%;}
		</style>
	</head>

	<body class="body_bg" ontouchstart>
		<header class="ui-header ui-header-positive ui-border-b">
			<i class="ui-icon-return" onclick="history.back()"></i>
			<h1>12389投诉</h1>
		</header>

		<section class="ui-container">
			<div class="ui-form-item ui-form-item-show ui-border-b bg_fff">
				<label for="#" class="h1_text" style="width: 80%;color: #2775fb; font-size: 16px; text-align: left;">举报人信息</label>
			</div>
			<div class="ui-form-item ui-form-item-show ui-border-b bg_fff">
				<label for="#"><span class="text_red">*</span>联系方式：</label>
				<input type="text" placeholder="">
			</div>
			<div class="ui-form-item ui-form-item-show ui-border-b bg_fff">
				<label for="#">举报人姓名：</label>
				<input type="text" placeholder="">
			</div>
			<div class="ui-form-item ui-form-item-show ui-border-b bg_fff">
				<label for="#">企业代码：</label>
				<input type="text" placeholder="">
			</div>
			<div class="ui-form-item ui-form-item-show ui-border-b bg_fff">
				<label for="#">联系地址：</label>
				<input type="text" placeholder="">
			</div>

			<div class="ui-form-item ui-form-item-show ui-border-tb bg_fff" style="margin-top: 10px; position: relative;">
				<label for="#" class="h1_text" style="width: 80%;color: #666;font-size: 16px;text-align: left; font-weight: bold; ">请选择举报类型</label>
				<div style="position: absolute; right: 20px; top: 8px;" <label class="ui-radio" for="radio">
					<input type="radio" name="radio" id="gr_radio" checked="checked">
					</label>
					个人
					<label class="ui-radio" for="radio">
						<input type="radio" name="radio" id="dw_radio">
					</label>
					单位
				</div>
			</div>
			<div id="gr">
				<div class="ui-form-item ui-form-item-show ui-border-b bg_fff">
					<label for="#" class="h1_text" style="width: 80%;color: #2775fb; font-size: 16px;text-align: left; ">被举报人信息</label>
				</div>
				<div class="ui-form-item ui-border-b  bg_fff">
					<label style="color: #666;"><span class="text_red">*</span>警种：</label>
					<div class="ui-select">
						<select>
							<option selected>禁毒</option>
						</select>
					</div>
				</div>
				<div class="ui-form-item ui-border-b  bg_fff">
					<label style="color: #666;">性别：</label>
					<div class="ui-select">
						<select>
							<option selected>男</option>
							<option>女</option>
						</select>
					</div>
				</div>
				<div class="ui-form-item ui-form-item-show ui-border-b bg_fff">
					<label for="#">被举报人姓名</label>
					<input type="text" placeholder="">
				</div>
				<div class="ui-form-item ui-form-item-show ui-border-b bg_fff">
					<label for="#">职务：</label>
					<input type="text" placeholder="">
				</div>
				<div class="ui-form-item ui-form-item-show ui-border-b bg_fff">
					<label for="#">被举报人单位</label>
					<input type="text" placeholder="">
				</div>
				<div class="ui-form-item ui-form-item-show ui-border-b bg_fff">
					<label for="#">人数：</label>
					<input type="text" placeholder="">
				</div>
				<div class="ui-btn-wrap">
					<button class="ui-btn-lg ui-btn-primary xyb">
						下一步
					</button>
				</div>

			</div>
			<div id="dw" style="display: none;">
				<div class="ui-form-item ui-form-item-show ui-border-b bg_fff">
					<label for="#" class="h1_text" style="width: 80%;color: #2775fb; font-size: 16px;text-align: left; ">被举报单位信息</label>
				</div>
				<div class="ui-form-item ui-border-b  bg_fff">
					<label style="color: #666;"><span class="text_red">*</span>警种：</label>
					<div class="ui-select">
						<select>
							<option selected>禁毒</option>
						</select>
					</div>
				</div>

				<div class="ui-form-item ui-form-item-show ui-border-b bg_fff">
					<label for="#">单位名称：</label>
					<input type="text" placeholder="">
				</div>
				<div class="ui-btn-wrap">
					<button class="ui-btn-lg ui-btn-primary xyb">
						下一步
					</button>
				</div>

			</div>
			</form>

		</section>
		
		<section class="ui-container" style="display: none;">
			
			<div class="ui-form-item ui-form-item-show ui-border-b bg_fff">
				<label for="#" class="h1_text" style="width: 80%;color: #2775fb; font-size: 16px; text-align: left;">举报内容</label>
			</div>
			<div class="ui-form-item ui-form-item-show ui-border-b bg_fff">
				<label for="#" style="width: 155px;"><span class="text_red">*</span>举报事项发生日期:</label>
				<input type="text" placeholder="" style="padding-left: 155px;">
			</div>
			<div class="ui-form-item ui-form-item-show ui-border-b bg_fff">
				<label for="#"><span class="text_red">*</span>事项名称:</label>
				<input type="text" placeholder="">
			</div>
			<div class="ui-form-item ui-form-item-show ui-border-b bg_fff">
				<label for="#" class="h1_text" style="width: 80%;color: #2775fb; font-size: 16px; text-align: left;"><span class="text_red">*</span>举报事项经过</label>
			</div>
			
		<div class="bg_fff">
            <textarea class="ts_textarae" style="width: 90%; border: 1px solid #E0E0E0; margin-top: 10px; margin-bottom: 5px;  border-radius: 5px; margin-left: 5%; height: 180px;"></textarea>
       <p class="ts_p" style="width: 90%; margin-left: 5%; padding-bottom: 10px; color: #666; font-size: 14px;text-align: right;">您还可以输入1000/1000个字</p>
		</div>
<div class="ui-btn-wrap">
					<button class="ui-btn-lg ui-btn-primary">
						提交
					</button>
				</div>
		</section>
	</body>
	<script src="../js/zepto.min.js"></script>
	<script type="text/javascript">
		$(function() {
			$("#gr_radio").tap(function() {
				$("#gr").show();
				$("#dw").hide();
				
			})
			$("#dw_radio").tap(function() {
				$("#gr").hide();
				$("#dw").show();
				
			})
			$(".xyb").tap(function() {
				$(".ui-container").first().hide();
				$(".ui-container").last().show();
			})
		})
	</script>

</html>